<template>
    <div class="page">
        <a-form class="form" layout="inline" :label-col="{style: { width: '100px' }}">
            <a-button class="form-btn" @click="getList" type="primary">查询</a-button>
        </a-form>
        <div class="page_content flex-column">
            <div class="table_tool mar-b10">
                <lo-button size="small" type="primary" color="success" @click="editPowerFn('open')">+新增权限</lo-button>
            </div>
            <div class="flex-1">
                <table-container v-slot="{containerHeight}">
                    <lo-table
                        :columns="tableColmun"
                        :dataSource="tableData"
                        :height="containerHeight">
                        <template #bodyCell="{column, record}">
                            <template v-if="column.dataIndex == 'op'">
                                <lo-button @click="editPowerFn('open', record, 'edit')" class="mar-r10"  size="small" color="primary">编辑</lo-button>
                                <lo-button @click="editPowerFn('open', record, 'addChild')" class="mar-r10" size="small" color="primary" >新增子级</lo-button>
                                <lo-button @click="deletePowerItem(record)" size="small" color="danger" >删除</lo-button>
                            </template>
                        </template>
                    </lo-table>
                </table-container>
            </div>
        </div>
        <lo-modal
            title="新增/修改"
            width="500px"
            ref="editPowerRef" @confirm="editPowerFn('confirm')">
            <div>
                <a-form :label-col="{style: { width: '100px' }}">
                    <a-form-item label="名称：">
                        <a-input v-model:value="powerItem.perName" placeholder="名称" />
                    </a-form-item>
                    <a-form-item label="父级">
                        <TreeSelect
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            placeholder="请选择"
                            allow-clear
                            tree-default-expand-all
                            :tree-data="tableData"
                            :fieldNames="{
                                children:'children',
                                label:'perName',
                                value: 'perId',
                                key: 'perId'
                            }"
                            style="width: 100%" v-model:value="powerItem.parentId"></TreeSelect>
                    </a-form-item>
                    <a-form-item label="是否菜单">
                        <lo-select v-model:value="powerItem.menuFlag" noborder>
                            <a-select-option value="00">否</a-select-option>
                            <a-select-option value="01">是</a-select-option>
                        </lo-select>
                    </a-form-item>
                    <a-form-item label="菜单代码：">
                        <a-input v-model:value="powerItem.menuCode" placeholder="菜单代码" />
                    </a-form-item>
                    <a-form-item label="权限代码：">
                        <a-input v-model:value="powerItem.perCode" placeholder="权限代码" />
                    </a-form-item>
                    <a-form-item label="排序：">
                        <a-input v-model:value="powerItem.sort" placeholder="排序" />
                    </a-form-item>
                </a-form>
            </div>
        </lo-modal>
    </div>
</template>

<script lang="jsx" setup>
    import { ref, onMounted, computed, watch } from 'vue'
    import { getSysPers, editSysPer} from '@/api/system'
    import { TreeSelect } from 'ant-design-vue'


    onMounted(() => {
        getList()
    })

    // ********************* 列表 *********************

    const tableColmun = computed(() => {
        return [
            { title: '名称', dataIndex: 'perName', key: 'perName', align: 'left', width: '200px', },
            { title: '排序', dataIndex: 'sort', key: 'sort', width: '60px', align: 'center' },
            { title: '是否菜单', dataIndex: 'menuFlag', key: 'menuFlag', align: 'center', width: '100px', customRender: ({ record }) => (<span> {record.menuFlag == '01' ? '是' : '否'} </span>) },
            { title: '菜单代码', dataIndex: 'menuCode', key: 'menuCode', align: 'center' },
            { title: '权限代码', dataIndex: 'perCode', key: 'perCode', align: 'center' },
            { title: '操作', dataIndex: 'op', key: 'op', width: '230px', align: 'center' },
        ]
    })
    const tableData = ref([])
    function getList() {
        getSysPers({
            // menuFlag: menuFlag.value //01菜单，00权限
        }).then(res => {
            const setChilren = (item) => {
                item.key = item.perId
                if(item.subs && item.subs.length) {
                    item.children = item.subs
                    item.subs.forEach(i => {
                        setChilren(i)
                    })
                }
            }
            res.data.forEach(setChilren)
            tableData.value = res.data
        })
    }

    // ********************* 编辑相关 *********************

    const POWER_ITEM = {
        parentId: void 0,
        menuFlag: '00',
        perCode: '',
        perId: '',
        perName: '',
        menuCode: '',
        remark: '',
        sort: '',
    }
    const editPowerRef = ref(null)
    const powerItem = ref({ ...POWER_ITEM })
    function editPowerFn(type, item, op) {
        if(type == 'open') {
            editPowerRef.value.open()
            if(op == 'edit') {
                if(!item.parentId || item.parentId == '0') {
                    item.parentId = void 0
                }
                powerItem.value = { ...item }
            } else if(op == 'addChild') {
                powerItem.value = { ... POWER_ITEM }
                powerItem.value.parentId = item.perId
            } else {
                powerItem.value = { ...POWER_ITEM }
            }
        } else if(type == 'cancel') {
            editPowerRef.value.close()
        } else if(type == 'confirm') {
            editSysPer({
                menuFlag: powerItem.value.menuFlag, //权限
                parentId: powerItem.value.parentId,
                perCode: powerItem.value.perCode,
                perId: powerItem.value.perId || void 0,
                perName: powerItem.value.perName,
                menuCode: powerItem.value.menuCode,
                remark: powerItem.value.remark,
                sort: powerItem.value.sort,
            }).then(res => {
                $global.message.success(res.msg)
                getList()
                editPowerFn('cancel')
            })
        }
    }

    function deletePowerItem(row) {
        $global.modal.confirm('是否删除？').then(() => {
            editSysPer({
                perId: row.perId,
                delStatus: '01'
            }).then(res => {
                $global.message.success(res.msg)
                getList()
            })
        })

    }

</script>

<style lang="less" scoped>

</style>
